<link rel="stylesheet" type="text/css" href="ccay/web/resource/ui/plugins/plot/jquery.jqplot.min.css" />
<link rel="stylesheet" href="ccay/example/demo.css"	type="text/css" />
<script type="text/javascript" src="ccay/example/demo.js" charset="utf-8"></script>
<!--[if lte IE 9]>
<script language="javascript" type="text/javascript" src="ccay/web/resource/ui/plugins/plot/excanvas.min.js"  charset="utf-8"></script>
<![endif]-->
<script type="text/javascript"	src="ccay/web/resource/ui/plugins/plot/jquery.jqplot.min.js" 	charset="utf-8"></script>
<script type="text/javascript" src="ccay/web/resource/ui/plugins/plot/plugins/jqplot.cursor.min.js"></script>
<script type="text/javascript" src="ccay/web/resource/ui/plugins/plot/plugins/jqplot.highlighter.min.js"></script>

<script class="include" language="javascript" type="text/javascript" src="ccay/web/resource/ui/plugins/plot/plugins/jqplot.pieRenderer.min.js"></script>
<script class="include" language="javascript" type="text/javascript" src="ccay/web/resource/ui/plugins/plot/plugins/jqplot.donutRenderer.min.js"></script>
<script type="text/javascript" src="ccay/web/resource/ui/ccay.ui.chart.jqplot.js" charset="utf-8"></script>
<script type="text/javascript" src="ccay/example/ui/chart/jqplot/pieDemo.js" />

<div id="barDemo">
	<div title="API">
	  <div>
		<samp><h2>pies饼图设置</h2></samp> 
		  <div style='padding-left:30px'>
			 <form id="param" class="init ccay-form">
			  <div class="ccay-form-body ccay-form-custom">	
			  	<li class="ccay-form-row">
					<samp><h3>初始化属性</h3></samp> 
			    	<span class="ccay-form-input">
			    		<h3>描述</h3> 
			    	</span>
				</li>
				<li class="ccay-form-row">
					<samp>diameter：number</samp> 
			    	<span class="ccay-form-input">设置饼的直径</span>
				</li>
				<li class="ccay-form-row">
					<samp>padding: number</samp> 
			    	<span class="ccay-form-input">饼距离其分类名称框或者图表边框的距离，变相该表饼的直径</span>
				</li>
				<li class="ccay-form-row">
					<samp>sliceMargin: number</samp> 
			    	<span class="ccay-form-input">饼的每个部分之间的距离</span>
				</li>
				<li class="ccay-form-row">
					<samp>fill: boolean</samp> 
			    	<span class="ccay-form-input">设置饼的每部分被填充的状态 </span>
				</li>
				<li class="ccay-form-row">
					<samp>shadow: boolean</samp> 
			    	<span class="ccay-form-input">为饼的每个部分的边框设置阴影，以突出其立体效果 </span>
				</li>
				<li class="ccay-form-row">
					<samp>shadowOffset: number</samp> 
			    	<span class="ccay-form-input">设置阴影区域偏移出饼的每部分边框的距离</span>
				</li>
				<li class="ccay-form-row">
					<samp>shadowDepth: number</samp> 
			    	<span class="ccay-form-input">设置阴影区域的深度</span>
				</li>
				<li class="ccay-form-row">
					<samp>shadowAlpha: number or float</samp> 
			    	<span class="ccay-form-input">设置阴影区域的透明度 </span>
				</li>
				</div>
			  </form>
			</div>
					
		</div>
		<!--  -->
		<br>
			<a onclick="Ccay.Common.toggle(this,'#serviceCodeArea')">需要引入的JS>></a>
			<div id="serviceCodeArea" class="codeArea" style="display:none;">
<pre>
&ltscript type="text/javascript" src="ccay/web/resource/ui/plugins/plot/jquery.jqplot.min.js" 	charset="utf-8">&lt/script>
&ltscript type="text/javascript" src="ccay/web/resource/ui/plugins/plot/plugins/jqplot.cursor.min.js">&lt/script>
&ltscript type="text/javascript" src="ccay/web/resource/ui/plugins/plot/plugins/jqplot.highlighter.min.js">&lt/script>

&ltscript class="include" language="javascript" type="text/javascript" src="ccay/web/resource/ui/plugins/plot/plugins/jqplot.pieRenderer.min.js">&lt/script>
&ltscript class="include" language="javascript" type="text/javascript" src="ccay/web/resource/ui/plugins/plot/plugins/jqplot.donutRenderer.min.js">&lt/script>
&ltscript type="text/javascript" src="ccay/web/resource/ui/ccay.ui.chart.jqplot.js" charset="utf-8">&lt/script> charset="utf-8">&ltscript>
</pre></div>
	</div>
	
	<div title="饼图" tabid="chart">
		<h4><span>饼图</span></h4>
		<div id=chart style="width:500px"></div>
		<span class="ccay-button"   onclick="$('#chart').chartAsImage()">
			<a class="ccay-icon pic"></a>
			<label>保存为图片</label>
		</span>
		<br>
		<h3>html 源码:</h3>
		<div class="codeArea">
			<pre id='html1'>
&lt;h4>&lt;span>饼图&lt;/span>&lt;/h4>
&lt;div id=chart11>&lt;/div>
			</pre>
		</div>
		<h3>js 源码:</h3>
		<div class="codeArea">
			<pre id='js1'>
				var data = [['重工业', 30], ['轻工业', 40],['零售', 10],['其他', 20]];
   			
	   			$("#chart11").chart2({
	   				data: [data],
	   				skin: {
	   					seriesDefaults: {
	   		             renderer: jQuery.jqplot.PieRenderer, 
	   		             rendererOptions: {
	   		               showDataLabels: true
	   		             }
	   		           }, 
	   		           legend: { show:true, location: 'e' }
	   				}
	   			});
			</pre>
		</div>
		<div>
			<a onclick="Ccay.example.openTry('#barDemo',$('#js1').html(),$('#html1').html())">试一试</a>
		</div>
	</div>
	
	<div title="饼图" tabid="chart1">
		<h4><span>饼图</span></h4>
		<div id=chart1 style="width:700px"></div>
		<br>
		<h3>html 源码:</h3>
		<div class="codeArea">
			<pre id='html2'>
&lt;h4>&lt;span>饼图&lt;/span>&lt;/h4>
&lt;div id=chart22>&lt;/div>
			</pre>
		</div>
		<h3>js 源码:</h3>
		<div class="codeArea">
			<pre id='js2'>
				var s1 = [['Sony',7], ['Samsumg',13.3], ['LG',14.7], ['Vizio',5.2], ['Insignia', 1.2]];
	        
		   		$("#chart22").chart2({
		   			data: [s1],
		   			skin: {
		   				grid: {
		   	   	            drawBorder: false, 
		   	   	            drawGridlines: false,
		   	   	            background: '#ffffff',
		   	   	            shadow:false
		   	   	        },
		   	   	        seriesDefaults:{
		   	   	            renderer:$.jqplot.PieRenderer,
		   	   	            rendererOptions: {
		   	   	                showDataLabels: true
		   	   	            }
		   	   	        },
		   	   	        legend: {
		   	   	            show: true,
		   	   	            rendererOptions: {
		   	   	                numberRows: 1
		   	   	            },
		   	   	            location: 's'
		   	   	        }
		   			}
		   		});
			</pre>
		</div>
		<div>
			<a onclick="Ccay.example.openTry('#barDemo',$('#js2').html(),$('#html2').html())">试一试</a>
		</div>
	</div>
	
	
	<div title="试一试" tabid="trytab" >
	    <fieldset class='ccay-demo'>
	    <legend ><h2>代码区</h2></legend>
		   
		   <span>请在下面的文本框中编辑您的代码，然后单击此按钮测试结果  ————></span><input value="try it yourself" type="button" onclick="Ccay.example.runDemo()" /> 

				<div>
				    <table  style="width:100%;">
				      <tr>
				        <td style="width:100%;">
						<h3>js Code:</h3>	
						  <!-- 高度按需来调整。默认最小应为100px -->					
	                      <textarea id="jsTxt" style="height:200px;width:99%;"></textarea>
	                    </td>   
	                  </tr>
	                  <tr>
	                    <td style="width:100%;">
						<h3>html Code:</h3>
						  <!-- 高度按需来调整。默认最小应为100px -->
	                      <textarea id="htmlTxt" style="height:100px;width:99%;"></textarea>
	                    </td>
	                  </tr> 
                    </table>
				</div>
           </fieldset>
        <fieldset class='ccay-demo'>
          <legend ><h2>结果区</h2></legend>
			<div>
				<div style="overflow:auto;width:700px" id="demoMainPanel"></div>
			</div>
        </fieldset>
     </div>
  	
	<div title="FAQ">
	  	<form class="init ccay-form">
	    <div class="ccay-form-body">
	    	<ul></ul>
		</div>     
		<div class="ccay-form-custom">
	    <ul>                     
	        <li class="ccay-form-row">
	           <samp><h3>问题</h3></samp>
	           <span class="ccay-form-input">
	               <h3>解决方案</h3>
	           </span>
	        </li>
	        <!-- 若问题和内容较多，可在li中的class加上ccay-form-whole -->
	        <li class="ccay-form-row">
	            <samp class="i18n" i18nKey=""></samp>                          
	            <span class="ccay-form-input"></span>
	        </li>  
	    </ul>
		</div>
	  	</form> 
	</div>
</div>

